@import './customProperties.less';

*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}

html,
body,
#root {
  height: 100%;
  background: var(--rps-bg-primary);
  color: var(--rps-text-primary);
  .global-app-wrapper,
  .global-content-wrapper {
    height: 100%;
  }
}

.arco-breadcrumb {
  background: var(--rps-bg-primary);
}

.global-app-wrapper.title-bar-divider {
  border-top: 1px solid var(--rps-border-color);
}

.global-scroll-bar {
  /* Customize website's scrollbar like Mac OS

  /* total width */
  *::-webkit-scrollbar {
    background-color: var(--rps-bg-primary);
    width: 16px;
  }

  /* background of the scrollbar except button or resizer */
  *::-webkit-scrollbar-track {
    background-color: var(--rps-bg-primary);
  }
  *::-webkit-scrollbar-track:hover {
    background-color: transparent;
  }

  /* scrollbar itself */
  *::-webkit-scrollbar-thumb {
    background-color: rgb(var(--gray-4));
    border-radius: 16px;
    border: 5px solid var(--rps-bg-primary);
  }
  *::-webkit-scrollbar-thumb:hover {
    background-color: rgb(var(--gray-5));
    border: 4px solid rgb(var(--gray-2));
  }

  /* set button(top and bottom of the scrollbar) */
  *::-webkit-scrollbar-button {
    display: none;
  }
}
